﻿<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<link rel="Bookmark" href="/favicon.ico" >
<link rel="Shortcut Icon" href="/favicon.ico" />
<!--[if lt IE 9]>
<script type="text/javascript" src="lib/html5shiv.js"></script>
<script type="text/javascript" src="lib/respond.min.js"></script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="h-ui/css/H-ui.min.css" />
<!--[if IE 6]>
<script type="text/javascript" src="lib/DD_belatedPNG_0.0.8a-min.js" ></script>
<script>DD_belatedPNG.fix('*');</script>
<![endif]-->
<title>Hi，H-ui v4.0</title>
<meta name="keywords" content="关键词,5个左右,单个8汉字以内">
<meta name="description" content="网站描述，字数尽量空制在80个汉字，160个字符以内！">
</head>
<body ontouchstart>
<div class="hui-side-box">
  <ul class="hui-nav pt-20">
    <li><a href="#">登录/注册</a></li>
    <li><a href="#">技术检索</a></li>
    <li><a href="#">关于我们</a></li>
    <li><a href="#">联系我们</a></li>
    <li><a href="#">隐私保护</a></li>
    <li><a href="#">免责声明</a></li>
    <li><a href="#">支付方式</a></li>
  </ul>
</div>
<div class="hui-container-wrapper">
  <div class="hui-container-bg"></div>
  <header class="hui-nav-wrapper">
    <div class="hui-nav-bar hui-nav-black hui-nav-fixed-top">
      <div class="hui-layout-content clearfix">
        <a class="hui-logo hidden-xs" href="http://www.h-ui.net/aboutHui.shtml">H-ui前端框架</a>
        <a class="hui-logo visible-xs" href="http://www.h-ui.net/aboutHui.shtml">H-ui</a>
        <span class="hui-logo hui-slogan hidden-xs">简单 &middot; 免费 &middot; 适合中国网站</span>
        <a aria-hidden="false" class="hui-nav-toggle hui-iconfont visible-xs JS-nav-toggle" href="javascript:;">&#xe667;</a>
        <nav class="hui-nav hui-nav-collapse" style="float: left; display: flex; flex: 1 1 0%;">
          <ul class="clearfix">
            <li class="current">
              <a href="http://www.h-ui.net/" target="_blank">首页</a>
            </li>
            <li>
              <a href="http://www.h-ui.net/Hui-overview.shtml" target="_blank">核心</a>
            </li>
            <li>
              <a href="http://www.h-ui.net/lib/jQuery.cookie.js.shtml" target="_blank">脚本</a>
            </li>
            <li class="hui-dropdown hui-dropdown-hover">
              <a href="javascript:;" class="hui-dropdown-link">工具 <i class="hui-iconfont">&#xe6d5;</i></a>
              <ul class="hui-menu hui-dropdown-menu radius box-shadow">
                <li class="hui-menu-item">
                  <a href="http://www.h-ui.net/bug.shtml" target="_blank">Bug兼容性汇总</a>
                </li>
                <li class="hui-menu-item">
                  <a href="http://www.h-ui.net/websafecolors.shtml" target="_blank">web安全色</a>
                </li>
                <li class="hui-menu-item">
                  <a href="http://www.h-ui.net/hui-3.7-hui-iconfont.shtml" target="_blank">hui-iconfont</a>
                </li>
                <li class="hui-menu-item">
                  <a href="javascript:;">web工具箱<i class="arrow hui-iconfont">&#xe6d7;</i></a>
                  <ul class="hui-menu">
                    <li class="hui-menu-item">
                      <a href="http://www.h-ui.net/tools/jsformat.shtml" target="_blank">JS/HTML格式化工具</a>
                    </li>
                    <li class="hui-menu-item">
                      <a href="http://www.h-ui.net/tools/HTMLtoJS.shtml" target="_blank">HTML/JS转换工具</a>
                    </li>
                    <li class="hui-menu-item">
                      <a href="http://www.h-ui.net/tools/cssformat.shtml" target="_blank">CSS代码格式化工具</a>
                    </li>
                    <li class="hui-menu-item">
                      <a href="http://www.h-ui.net/tools/daxiaoxie.shtml" target="_blank">字母大小写转换工具</a>
                    </li>
                    <li class="hui-menu-item">
                      <a href="http://www.h-ui.net/tools/fantizhuanhuan.shtml" target="_blank">繁体字、火星文转换</a>
                    </li>
                    <li class="hui-menu-item">
                      <a href="javascript:;">三级菜单<i class="arrow hui-iconfont">&#xe6d7;</i></a>
                      <ul class="hui-menu">
                        <li class="hui-menu-item">
                          <a href="javascript:;">四级菜单</a>
                        </li>
                        <li class="hui-menu-item">
                          <a href="javascript:;">四级菜单</a>
                        </li>
                        <li class="hui-menu-item">
                          <a href="javascript:;">四级菜单</a>
                        </li>
                      </ul>
                    </li>
                    <li class="hui-menu-item">
                      <a href="#">三级导航</a>
                    </li>
                  </ul>
                </li>
                <li class="hui-menu-item">
                  <a href="#">二级导航</a>
                </li>
                <li class="hui-menu-item disabled">
                  <a href="javascript:;">二级菜单</a>
                </li>
              </ul>
            </li>
            <li>
              <a href="http://h-ui.net/aboutHui.shtml" target="_blank">联系我们</a>
            </li>
          </ul>
        </nav>
        <nav class="hui-nav hidden-xs" style="float: right">
          <ul class="clearfix">
            <li>
              <a href="#" target="_blank">登录</a>
            </li>
            <li>
              <a href="#" target="_blank">注册</a>
            </li>
          </ul>
        </nav>
      </div>
    </div>
  </header>

  <div class="hui-container-wap">
    <div id="hui-carousel-demo">
      <div class="hui-carousel">
        <div class="bd">
          <ul>
            <li>
              <a href="http://www.h-ui.net/" target="_blank"><img src="h-ui/images/temp/banner-1.jpg" ></a>
            </li>
            <li>
              <a href="http://www.h-ui.net/zhaoshang.shtml" target="_blank"><img src="h-ui/images/temp/banner-2.jpg" ></a>
            </li>
            <li>
              <a href="http://h-ui.net/H-ui.admin.shtml" target="_blank"><img src="h-ui/images/temp/banner-3.jpg" ></a>
            </li>
          </ul>
        </div>
        <ol class="hd cl dots">
          <li>1</li>
          <li>2</li>
          <li>3</li>
        </ol>
      </div>
    </div>

    <nav class="hui-breadcrumb">
      <div class="hui-layout-content">
        <i class="hui-iconfont">&#xe67f;</i>
        <a href="/" class="c-primary">首页</a>
        <span class="c-gray en">&gt;</span>
        <a href="#">组件</a>
        <span class="c-gray en">&gt;</span>
        <span class="c-gray">当前页面</span>
      </div>
    </nav>

    <div class="hui-layout-content ui-sortable">
      <h1>Hi,H-ui v4.0!</h1>
      <p class="f-14">开始全新的前端之旅！</p>
      <div class="hui-panel hui-panel-default">
        <div class="hui-panel-header">表单</div>
        <div class="hui-panel-body">
          <form action="" method="post" class="hui-form hui-form-horizontal responsive" id="demoform">
            <div class="hui-form-item hui-row clearfix">
              <label class="hui-form-item-label hui-col-xs-3">邮箱：</label>
              <div class="hui-form-item-control hui-col-xs-8">
                <input type="text" class="hui-input-text" placeholder="@" name="email" id="email" autocomplete="off">
              </div>
            </div>
            <div class="hui-form-item hui-row clearfix">
              <label class="hui-form-item-label hui-col-xs-3">用户名：</label>
              <div class="hui-form-item-control hui-col-xs-8">
                <input type="text" class="hui-input-text" placeholder="4~16个字符，字母/中文/数字/下划线" name="username" id="username">
              </div>
            </div>
            <div class="hui-form-item hui-row clearfix">
              <label class="hui-form-item-label hui-col-xs-3">手机：</label>
              <div class="hui-form-item-control hui-col-xs-8">
                <input type="text" class="hui-input-text" autocomplete="off" placeholder="手机" name="telephone" id="telephone">
              </div>
            </div>
            <div class="hui-form-item hui-row clearfix">
              <label class="hui-form-item-label hui-col-xs-3">密码：</label>
              <div class="hui-form-item-control hui-col-xs-8">
                <input type="password" class="hui-input-text" autocomplete="off" placeholder="密码" name="password" id="password">
              </div>
            </div>
            <div class="hui-form-item hui-row clearfix">
              <label class="hui-form-item-label hui-col-xs-3">密码验证：</label>
              <div class="hui-form-item-control hui-col-xs-8">
                <input type="password" class="hui-input-text" autocomplete="off" placeholder="密码" name="password2" id="password2">
              </div>
            </div>
            <div class="hui-divider text-l">
              <div class="hui-divider-box">
                <span class="hui-divider-text">其他信息</span>
              </div>
            </div>
            <div class="hui-form-item hui-row clearfix">
              <label class="hui-form-item-label hui-col-xs-3">单选框：</label>
              <div class="hui-form-item-control skin-minimal hui-col-xs-5">
                <div class="radio-box">
                  <input type="radio" id="sex-1" name="sex" value="1">
                  <label for="sex-1">男</label>
                </div>
                <div class="radio-box">
                  <input type="radio" id="sex-2" name="sex" value="0">
                  <label for="sex-2">女</label>
                </div>
                <div class="radio-box">
                  <input type="radio" id="sex-3" name="sex" value="2">
                  <label for="sex-3">保密</label>
                </div>
              </div>
            </div>
            <div class="hui-form-item hui-row clearfix">
              <label class="hui-form-item-label hui-col-xs-3">出生日期：</label>
              <div class="hui-form-item-control hui-col-xs-8">
                <input type="text" class="hui-input-text datetimepicker-input" value="" autocomplete="off" id="datetimepicker" name="datetimepicker">
              </div>
            </div>
            <div class="hui-form-item hui-row clearfix">
              <label class="hui-form-item-label hui-col-xs-3">爱好：</label>
              <div class="hui-form-item-control skin-minimal hui-col-xs-5">
                <div class="check-box">
                  <input type="checkbox" id="checkbox-5" name="checkbox2" value="1">
                  <label for="checkbox-5">上网</label>
                </div>
                <div class="check-box">
                  <input type="checkbox" id="checkbox-6" name="checkbox2" value="2">
                  <label for="checkbox-6">摄影</label>
                </div>
              </div>
            </div>
            <div class="hui-form-item hui-row clearfix">
              <label class="hui-form-item-label hui-col-xs-3">数量：</label>
              <div class="hui-form-item-control skin-minimal hui-col-xs-5">
                <div id="spinner-demo"></div>
              </div>
            </div>
            <div class="hui-form-item hui-row clearfix">
              <label class="hui-form-item-label hui-col-xs-3">附件：</label>
              <div class="hui-form-item-control hui-col-xs-8">
                <span class="hui-upload hui-form-group">
                <input class="hui-input-text upload-url" type="text" name="uploadfile-2" id="uploadfile-2" readonly style="width:200px">
                <a href="javascript:void();" class="hui-btn hui-btn-primary upload-btn"><i class="hui-iconfont">&#xe642;</i> 浏览文件</a>
                <input type="file" multiple name="file-2" class="input-file">
                </span>
              </div>
            </div>
            <div class="hui-form-item hui-row clearfix">
              <label class="hui-form-item-label hui-col-xs-3">所在城市：</label>
              <div class="hui-form-item-control hui-col-xs-8">
                <div class="hui-form-item hui-row clearfix" style="margin-top:0">
                  <div class="hui-col-xs-6">
                    <span class="hui-select-box">
                      <select class="hui-select" size="1" name="city">
                        <option value="" selected>选择省份</option>
                        <option value="1">北京</option>
                        <option value="2">上海</option>
                        <option value="3">广州</option>
                      </select>
                    </span>
                  </div>
                  <div class="hui-col-xs-6">
                    <span class="hui-select-box">
                      <select class="hui-select" size="1" name="city">
                        <option value="" selected>选择城市</option>
                        <option value="1">北京</option>
                        <option value="2">上海</option>
                        <option value="3">广州</option>
                      </select>
                    </span>
                  </div>
                </div>
              </div>
            </div>
            <div class="hui-form-item hui-row clearfix">
              <label class="hui-form-item-label hui-col-xs-3">网址：</label>
              <div class="hui-form-item-control hui-col-xs-8">
                <input type="text" class="hui-input-text" placeholder="http://" name="website" id="website">
              </div>
            </div>
            <div class="hui-form-item hui-row clearfix">
              <label class="hui-form-item-label hui-col-xs-3">备注：</label>
              <div class="hui-form-item-control hui-col-xs-8">
                <textarea class="hui-textarea" name="beizhu" id="beizhu"  placeholder="说点什么...最少输入10个字符"></textarea>
              </div>
            </div>
            <div class="hui-form-item hui-row clearfix">
              <div class="hui-col-xs-8 hui-col-xs-offset-3">
                <input class="hui-btn hui-btn-primary" type="submit" value="&nbsp;&nbsp;提交&nbsp;&nbsp;">
              </div>
            </div>
          </form>
        </div>
      </div>

      <div class="hui-panel hui-panel-default mt-20">
        <div class="hui-panel-header">按钮</div>
        <div class="hui-panel-body">
          <table class="hui-table hui-table-border hui-table-bordered hui-table-striped hui-table-responsive mt-20 radius">
            <thead>
              <tr>
                <th class="col1">button</th>
                <th class="col2">input</th>
                <th class="col3">a</th>
                <th class="col4">disabled状态</th>
                <th class="col5">空心</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td><button class="hui-btn hui-btn-default radius" type="button">默认</button></td>
                <td><input class="hui-btn hui-btn-default radius" type="button" value="默认"></td>
                <td><a href="#" class="hui-btn hui-btn-default radius">默认</a></td>
                <td><input class="hui-btn hui-btn-default radius disabled" type="button" value="不可点击"></td>
                <td></td>
              </tr>
              <tr>
                <td><button class="hui-btn hui-btn-primary radius" type="button">主要</button></td>
                <td><input class="hui-btn hui-btn-primary radius" type="button" value="主要"></td>
                <td><a href="#" class="hui-btn hui-btn-primary radius">主要</a></td>
                <td><input class="hui-btn hui-btn-primary radius disabled" type="button" value="不可点击"></td>
                <td><input class="hui-btn hui-btn-primary-outline radius" type="button" value="主要"></td>
              </tr>
              <tr>
                <td><button class="hui-btn hui-btn-secondary radius" type="button">次要</button></td>
                <td><input class="hui-btn hui-btn-secondary radius" type="button" value="次要"></td>
                <td><a href="#" class="hui-btn hui-btn-secondary radius">次要</a></td>
                <td><input class="hui-btn hui-btn-secondary radius disabled" type="button" value="不可点击"></td>
                <td><input class="hui-btn radius btn-secondary-outline radius" type="button" value="次要"></td>
              </tr>
              <tr>
                <td><button class="hui-btn hui-btn-success radius" type="button">成功</button></td>
                <td><input class="hui-btn hui-btn-success radius" type="button" value="成功"></td>
                <td><a href="#" class="hui-btn hui-btn-success radius">成功</a></td>
                <td><input class="hui-btn hui-btn-success radius disabled" type="button" value="不可点击"></td>
                <td><input class="hui-btn hui-btn-success-outline radius" type="button" value="成功"></td>
              </tr>
              <tr>
                <td><button class="hui-btn hui-btn-warning radius" type="button">警告</button></td>
                <td><input class="hui-btn hui-btn-warning radius" type="button" value="警告"></td>
                <td><a href="#" class="hui-btn hui-btn-warning radius">警告</a></td>
                <td><input class="hui-btn hui-btn-warning radius disabled" type="button" value="不可点击"></td>
                <td><input class="hui-btn hui-btn-warning-outline radius" type="button" value="警告"></td>
              </tr>
              <tr>
                <td><button class="hui-btn hui-btn-danger radius" type="button">危险</button></td>
                <td><input class="hui-btn hui-btn-danger radius" type="button" value="危险"></td>
                <td><a href="#" class="hui-btn hui-btn-danger radius">危险</a></td>
                <td><input class="hui-btn hui-btn-danger radius disabled" type="button" value="不可点击"></td>
                <td><input class="hui-btn hui-btn-danger-outline radius" type="button" value="危险"></td>
              </tr>
              <tr>
                <td><button class="hui-btn hui-btn-link radius" type="button">链接</button></td>
                <td><input class="hui-btn hui-btn-link radius" type="button" value="链接"></td>
                <td><a href="#" class="hui-btn hui-btn-link radius">链接</a></td>
                <td><input class="hui-btn hui-btn-link radius disabled" type="button" value="不可点击"></td>
                <td></td>
              </tr>
              <tr>
                <td><button class="hui-btn hui-btn-dashed radius" type="button">虚线</button></td>
                <td><input class="hui-btn hui-btn-dashed radius" type="button" value="虚线"></td>
                <td><a href="#" class="hui-btn hui-btn-dashed radius">虚线</a></td>
                <td><input class="hui-btn hui-btn-dashed radius disabled" type="button" value="不可点击"></td>
                <td></td>
              </tr>
            </tbody> 
          </table>
          <h3>按钮大小</h3>
          <table class="hui-table hui-table-border hui-table-bordered hui-table-striped">
            <thead>
              <tr>
                <th width="30%">按钮</th>
                <th>class=""</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td><input type="button" class="hui-btn hui-btn-primary size-XL radius" value="特大按钮"></td>
                <td><code>size-XL</code></td>
              </tr>
              <tr>
                <td><input type="button" class="hui-btn hui-btn-primary size-L radius" value="大按钮"></td>
                <td><code>size-L</code></td>
              </tr>
              <tr>
                <td><input type="button" class="hui-btn hui-btn-primary radius" value="默认尺寸"></td>
                <td><code>size-M</code> 缺省值</td>
              </tr>
              <tr>
                <td><input type="button" class="hui-btn hui-btn-primary size-S radius" value="小按钮"></td>
                <td><code>size-S</code></td>
              </tr>
              <tr>
                <td><input type="button" class="hui-btn hui-btn-primary size-MINI radius" value="迷你按钮"></td>
                <td><code>size-MINI</code></td>
              </tr>
            </tbody>
          </table>
          <h3>按钮组</h3>
          <div class="hui-btn-group">
            <span class="hui-btn hui-btn-primary radius">左边按钮</span>
            <span class="hui-btn hui-btn-default radius">中间按钮</span>
            <span class="hui-btn hui-btn-default radius">中间按钮</span>
            <span class="hui-btn hui-btn-default radius">右边按钮</span>
          </div>
          <div class="clearfix mt-20">
            <div class="hui-btn-group f-l">
              <span class="hui-btn hui-btn-primary" title="源代码"><i class="hui-iconfont">&#xe6ee;</i></span>
            </div>
            <div class="hui-btn-group f-l ml-5">
              <span class="hui-btn hui-btn-primary" title="左对齐"><i class="hui-iconfont">&#xe710;</i></span>
              <span class="hui-btn hui-btn-primary" title="居中对齐"><i class="hui-iconfont">&#xe70e;</i></span>
              <span class="hui-btn hui-btn-primary" title="右对齐"><i class="hui-iconfont">&#xe711;</i></span>
              <span class="hui-btn hui-btn-primary" title="两头对齐"><i class="hui-iconfont">&#xe70f;</i></span>
            </div>
            <div class="hui-btn-group f-l ml-5">
              <span class="hui-btn hui-btn-primary" title="字体"><i class="hui-iconfont">&#xe6ec;</i></span>
              <span class="hui-btn hui-btn-primary" title="加粗"><i class="hui-iconfont">&#xe6e7;</i></span>
              <span class="hui-btn hui-btn-primary" title="倾斜"><i class="hui-iconfont">&#xe6e9;</i></span>
              <span class="hui-btn hui-btn-primary" title="下划线"><i class="hui-iconfont">&#xe6fe;</i></span>
              <span class="hui-btn hui-btn-primary" title="行高"><i class="hui-iconfont">&#xe6fc;</i></span>
              <span class="hui-btn hui-btn-primary" title="行宽"><i class="hui-iconfont">&#xe6fd;</i></span>
            </div>
            <div class="hui-btn-group f-l ml-5">
              <span class="hui-btn hui-btn-primary" title="链接"><i class="hui-iconfont">&#xe6f1;</i></span>
              <span class="hui-btn hui-btn-primary" title="有序列表"><i class="hui-iconfont">&#xe6f3;</i></span>
              <span class="hui-btn hui-btn-primary" title="无序列表"><i class="hui-iconfont">&#xe6f5;</i></span>
            </div>
            <div class="hui-btn-group f-l ml-5">
              <span class="hui-btn hui-btn-primary" title="剪切"><i class="hui-iconfont">&#xe6ef;</i></span>
              <span class="hui-btn hui-btn-primary" title="复制"><i class="hui-iconfont">&#xe6ea;</i></span>
              <span class="hui-btn hui-btn-primary" title="粘贴"><i class="hui-iconfont">&#xe6eb;</i></span>
            </div>
          </div>
        </div>
      </div>

      <div class="hui-panel hui-panel-default mt-20">
        <div class="hui-panel-header">列表</div>
        <div class="hui-panel-body">
          <ul class="hui-list hui-list-disc">
            <li class="hui-list-item">无序列表</li>
            <li class="hui-list-item">无序列表</li>
            <li class="hui-list-item">无序列表</li>
          </ul>
          <ol class="hui-list hui-list-decimal">
            <li class="hui-list-item">有序列表</li>
            <li class="hui-list-item">有序列表</li>
            <li class="hui-list-item">有序列表</li>
          </ol>
          <ol class="hui-list hui-list-top">
            <li class="hui-list-item"><span class="num">1</span>有序列表</li>
            <li class="hui-list-item"><span class="num">2</span>有序列表</li>
            <li class="hui-list-item"><span class="num">3</span>有序列表</li>
          </ol>
        </div>
      </div>

      <div class="hui-panel hui-panel-default mt-20">
        <div class="hui-panel-header">图片</div>
        <div class="hui-panel-body">
          <p><img width="140" height="140" src="" alt="..." class="radius">
            <img width="140" height="140" src="" alt="..." class="round">
            <img style="width:140px; height:140px" src="" alt="..." class="hui-thumbnail"></p>
          
          <div class="hui-album" style="width:200px">
            <div class="hui-album-img">
              <img src="">
            </div>
            <div class="hui-album-title">《仙剑奇侠传》赵灵儿
              <span class="c-999">(20张)</span>
            </div>
            <div class="hui-album-bg">
              <div class="hui-album-bg-fir"></div>
              <div class="hui-album-bg-sec"></div>
            </div>
          </div>
          <div>
            <img src="h-ui/images/ucenter/avatar-default.jpg" class="hui-avatar radius size-MINI">
            <img src="h-ui/images/ucenter/avatar-default.jpg" class="hui-avatar radius size-S">
            <img src="h-ui/images/ucenter/avatar-default.jpg" class="hui-avatar radius size-M">
            <img src="h-ui/images/ucenter/avatar-default.jpg" class="hui-avatar radius size-L">
            <img src="h-ui/images/ucenter/avatar-default.jpg" class="hui-avatar radius size-XL">
          </div>
          <div class="hui-mask" style="width:300px; height:250px; border:solid 1px #ddd;">
            <img src="http://images.h-ui.net/www/AD-300x250.gif" width="300" height="250">
            <div class="mask-bar text-c">遮罩条</div>
          </div>
        </div>
      </div>

      <div class="hui-panel hui-panel-default mt-20">
        <div class="hui-panel-header">表格</div>
        <div class="hui-panel-body">
          <table id="exampleTable" class="hui-table hui-table-border hui-table-bordered hui-table-bg hui-table-hover">
            <thead>
              <tr class="text-c">
                <th width="25"><input class="checkbox checkbox-all" type="checkbox" name="" value="all"></th>
                <th width="80">ID</th>
                <th>标题</th>
                <th width="80">分类</th>
                <th width="80">来源</th>
                <th width="120">更新时间</th>
                <th width="75">浏览次数</th>
              </tr>
            </thead>
            <tbody class="getData-list" data-currpage="1">
              <tr class="text-c">
                <td><input class="checkbox" type="checkbox" value="10001" name=""></td>
                <td>10001</td>
                <td class="text-l"><u style="cursor:pointer" class="text-primary" title="查看">资讯标题</u></td>
                <td>行业动态</td>
                <td>H-ui</td>
                <td>2014-6-11 11:11:42</td>
                <td>21212</td>
              </tr>
              <tr class="text-c">
                <td><input class="checkbox" type="checkbox" value="10002" name=""></td>
                <td>10002</td>
                <td class="text-l"><u style="cursor:pointer" class="text-primary" title="查看">资讯标题</u></td>
                <td>行业动态</td>
                <td>H-ui</td>
                <td>2014-6-11 11:11:42</td>
                <td>21212</td>
              </tr>
            </tbody>
          </table>
   
        </div>
      </div>

      <div class="hui-panel hui-panel-default mt-20">
        <div class="hui-panel-header">选项卡</div>
        <div class="hui-panel-body">
          <div id="hui-tab-demo1" class="hui-tab">
            <div class="hui-tab-header clearfix">
              <span>选项卡一</span>
              <span>选项卡二</span>
              <span>自适应宽度</span>
            </div>
            <div class="hui-tab-content">内容一</div>
            <div class="hui-tab-content">内容二</div>
            <div class="hui-tab-content">内容三</div>
          </div>
        </div>
      </div>

      <div class="hui-panel hui-panel-default mt-20">
        <div class="hui-panel-header">便签与标号</div>
        <div class="hui-panel-body">
          <table class="hui-table hui-table-border hui-table-bordered hui-table-bg">
            <thead>
              <tr>
                <th>class=""</th>
                <th>标签</th>
                <th>标号</th>
                <th>描述</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td><code>hui-label hui-label-default radius</code></td>
                <td><span class="hui-label hui-label-default radius">默认</span></td>
                <td><span class="hui-badge hui-badge-default">1</span></td>
                <td>默认</td>
              </tr>
              <tr>
                <td><code>hui-label hui-label-primary radius</code></td>
                <td><span class="hui-label hui-label-primary radius">主要</span></td>
                <td><span class="hui-badge hui-badge-primary">2</span></td>
                <td>主要</td>
              </tr>
              <tr>
                <td><code>hui-label hui-label-secondary radius</code></td>
                <td><span class="hui-label hui-label-secondary radius">次要</span></td>
                <td><span class="hui-badge hui-badge-secondary">3</span></td>
                <td>次要</td>
              </tr>
              <tr>
                <td><code>hui-label hui-label-success radius</code></td>
                <td><span class="hui-label hui-label-success radius">成功</span></td>
                <td><span class="hui-badge hui-badge-success">4</span></td>
                <td>成功</td>
              </tr>
              <tr>
                <td><code>hui-label hui-label-warning radius</code></td>
                <td><span class="hui-label hui-label-warning radius">警告</span></td>
                <td><span class="hui-badge hui-badge-warning">5</span></td>
                <td>警告</td>
              </tr>
              <tr>
                <td><code>hui-label hui-label-danger radius</code></td>
                <td><span class="hui-label hui-label-danger radius">危险</span></td>
                <td><span class="hui-badge hui-badge-danger">6</span></td>
                <td>危险</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

      <div class="hui-panel hui-panel-default mt-20">
        <div class="hui-panel-header">警告</div>
        <div class="hui-panel-body">
          <div class="hui-alert hui-alert-success">
            <i class="hui-iconfont">&#xe6a6;</i>
            <div class="hui-alert-description">成功状态提示</div>
          </div>
          <div class="hui-alert hui-alert-danger">
            <i class="hui-iconfont">&#xe6a6;</i>
            <div class="hui-alert-description">危险状态提示</div>
          </div>
          <div class="hui-alert hui-alert-error">
            <i class="hui-iconfont">&#xe6a6;</i>
            <div class="hui-alert-description">错误状态提示</div>
          </div>
          <div class="hui-alert hui-alert-info">
            <i class="hui-iconfont">&#xe6a6;</i>
            <div class="hui-alert-description">信息状态提示</div>
          </div>
        </div>
      </div>
      <div class="hui-panel hui-panel-default mt-20">
        <div class="hui-panel-header">进度条</div>
        <div class="hui-panel-body">
          <div class="hui-progress radius">
            <div class="hui-progress-bar">
              <span class="sr-only" style="width:25%"></span>
            </div>
          </div>
        </div>
      </div>

      <div class="hui-panel hui-panel-default mt-20">
        <div class="hui-panel-header">弹出窗口</div>
        <div class="hui-panel-body">
          <p class="mt-20">
            <button class="hui-btn hui-btn-primary" onClick="modaldemo()">弹出对话框</button>
            <button class="hui-btn hui-btn-primary ml-20" onClick="modalalertdemo()">消息框，2秒钟自动消失</button>
          </p>
        </div>
      </div>

      <div class="hui-panel hui-panel-default mt-20">
        <div class="hui-panel-header">分享到</div>
        <div class="hui-panel-body">
          <section class="share clearfix">
            <div class="bdsharebuttonbox hui-share">
              <span class="share-text hui-iconfont">&#xe715;</span>
              <a href="#" class="bds_weixin hui-iconfont" data-cmd="weixin" title="分享到微信">&#xe694;</a>
              <a href="#" class="bds_qzone hui-iconfont" data-cmd="qzone" title="分享到QQ空间">&#xe6c8;</a>
              <a href="#" class="bds_sqq hui-iconfont" data-cmd="sqq" title="分享到QQ好友">&#xe67b;</a>
              <a href="#" class="bds_tsina hui-iconfont" data-cmd="tsina" title="分享到新浪微博">&#xe6da;</a>
              <a href="#" class="bds_tqq hui-iconfont" data-cmd="tqq" title="分享到腾讯微博">&#xe6d9;</a>
              <a href="#" class="bds_douban hui-iconfont" data-cmd="douban" title="分享到豆瓣网">&#xe67c;</a>
            </div>
            
          </section>
        </div>
      </div>

      <div class="hui-panel hui-panel-default mt-20">
        <div class="hui-panel-header">标签</div>
        <div class="hui-panel-body">
          <div id="hui-tag-demo1"></div>
        </div>
      </div>

      <div class="hui-panel hui-panel-default mt-20">
        <div class="hui-panel-header">星星评价</div>
        <div class="hui-panel-body">
          <div class="clearfix">
            <span class="f-l f-15 va-m">描述相符：</span>
            <div id="star-1" class="hui-star size-M f-l mr-10 va-m"></div>
            <strong id="result-1" class="f-l va-m"></strong>
          </div>
        </div>
      </div>

      <div class="hui-panel hui-panel-default mt-20">
        <div class="hui-panel-header">tooltip效果</div>
        <div class="hui-panel-body">
          <button class="hui-btn hui-btn-primary radius" data-toggle="tooltip" data-placement="right" title="右边显示">右边显示</button>
          <button class="hui-btn hui-btn-primary radius" data-toggle="tooltip" data-placement="top" title="上边显示">上边显示</button>
          <button class="hui-btn hui-btn-primary radius" data-toggle="tooltip" data-placement="bottom" title="下边显示">下边显示</button>
          <button class="hui-btn hui-btn-primary radius" data-toggle="tooltip" data-placement="left" title="左边显示">左边显示</button>
        </div>
      </div>

      <div class="hui-panel hui-panel-default mt-20">
        <div class="hui-panel-header">popover效果</div>
        <div class="hui-panel-body">
          <button type="button" class="hui-btn hui-btn-primary radius" title="标题" data-container="body" data-toggle="popover" data-placement="left" data-content="左侧的 Popover 中的一些内容">左侧的 Popover</button>
          <button type="button" class="hui-btn hui-btn-primary radius" title="标题" data-container="body" data-toggle="popover" data-placement="top" data-content="顶部的 Popover 中的一些内容">顶部的 Popover</button>
          <button type="button" class="hui-btn hui-btn-primary radius" title="标题" data-container="body" data-toggle="popover" data-placement="bottom" data-content="底部的 Popover 中的一些内容">底部的 Popover</button>
          <button type="button" class="hui-btn hui-btn-primary radius" title="标题" data-container="body" data-toggle="popover" data-placement="right" data-content="右侧的 Popover 中的一些内容">右侧的 Popover</button>
        </div>
      </div>

      <div class="hui-panel hui-panel-default mt-20">
        <div class="hui-panel-header clearfix">
          <span class="f-l">H-ui官方插件</span>
          <span class="f-r"></span>
        </div>
        <div class="hui-panel-body">
          <table class="hui-table hui-table-border hui-table-bordered hui-table-bg">
            <thead>
              <tr>
                <th width="30%">名称</th>
                <th width="20%">版本号</th>
                <th>描述</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td><a href="lib/jQuery.Huihover.js.shtml" target="_blank">jQuery.Huihover.js</a></td>
                <td>2.0</td>
                <td>hover</td>
              </tr>
              <tr>
                <td><a href="lib/jQuery.Huifocusblur.js.shtml" target="_blank">jQuery.Huifocusblur.js</a></td>
                <td>2.0</td>
                <td>得到失去焦点</td>
              </tr>
              <tr>
                <td><a href="lib/jQuery.Huifold.js.shtml" target="_blank">jQuery.hui-fold.js</a></td>
                <td>2.0</td>
                <td>折叠</td>
              </tr>
              <tr>
                <td><a href="lib/jQuery.Huipreview.js.shtml" target="_blank">jQuery.Huipreview.js</a></td>
                <td>2.0</td>
                <td>图片预览</td>
              </tr>
              <tr>
                <td><a href="lib/jQuery.Huispinner.js.shtml" target="_blank">jQuery.Huispinner.js</a></td>
                <td>2.0</td>
                <td>微调器</td>
              </tr>
              <tr>
                <td><a href="lib/jQuery.Huitab.js.shtml" target="_blank">jQuery.Huitab.js</a></td>
                <td>2.0</td>
                <td>选项卡</td>
              </tr>
              <tr>
                <td><a href="lib/jQuery.Huitag.js.shtml" target="_blank">jQuery.Huitag.js</a></td>
                <td>2.0</td>
                <td>标签</td>
              </tr>
              <tr>
                <td><a href="lib/jQuery.Huitextarealength.js.shtml" target="_blank">jQuery.Huitextarealength.js</a></td>
                <td>2.0</td>
                <td>字数限制</td>
              </tr>
              <tr>
                <td><a href="lib/jQuery.HuitogglePassword.js.shtml" target="_blank">jQuery.HuitogglePassword.js</a></td>
                <td>2.0</td>
                <td>隐藏显示密码</td>
              </tr>
              <tr>
                <td><a href="lib/jQuery.Huitotop.js.shtml" target="_blank">jQuery.Huitotop.js</a></td>
                <td>2.0</td>
                <td>返回顶部</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

      <div class="hui-panel hui-panel-default mt-20">
        <div class="hui-panel-header clearfix">
          <span class="f-l">H-ui.js v3.0 整合的第三方插件<small>(引入了H-ui.js v3.0版本，无需再单独重复引用以下插件)</small></span>
          <span class="f-r">感谢以下插件！优秀的插件就像金子一样，处处发光</span>
        </div>
        <div class="hui-panel-body">
          <table class="hui-table hui-table-border hui-table-bordered hui-table-bg">
            <thead>
              <tr>
                <th width="30%">名称</th>
                <th width="20%">版本号</th>
                <th>描述</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td><a href="lib/jQuery.cookie.js.shtml" target="_blank">jQuery.cookie.js</a></td>
                <td>1.4.1</td>
                <td>jQuery cookie插件。</td>
              </tr>
              <tr>
                <td><a href="lib/jQuery.form.js.shtml" target="_blank">jQuery.form.js</a></td>
                <td>3.51.0</td>
                <td>jquey表单插件。</td>
              </tr>
              <tr>
                <td><a href="lib/jQuery.lazyload.js.shtml" target="_blank">jQuery.lazyload.js</a></td>
                <td>1.9.3</td>
                <td>图片的延迟加载插件。</td>
              </tr>
              <tr>
                <td>jQuery.responsive-nav.js</td>
                <td>1.0.39</td>
                <td>响应式导航插件。</td>
              </tr>
              <tr>
                <td>jQuery.placeholder.js</td>
                <td>1.0</td>
                <td>IE浏览器支持placeholder。</td>
              </tr>

              <tr>
                <td>jQuery.emailsuggest.js</td>
                <td>1.0</td>
                <td>邮箱域名自动提示填充插件。</td>
              </tr>
              <tr>
                <td>jQuery.format.js</td>
                <td>1.0</td>
                <td>格式化字符串。</td>
              </tr>

              <tr>
                <td>jQuery.iCheck.js</td>
                <td>1.0</td>
                <td>单选框，复选框美化插件。</td>
              </tr>
              <tr>
                <td>jQuery.onePageNav.js</td>
                <td>1.0</td>
                <td>单页面滚动导航。</td>
              </tr>
              <tr>
                <td>jQuery.stickUp.js</td>
                <td>1.0</td>
                <td>网页滚动，元素固定置顶插件。</td>
              </tr>
              <tr>
                <td>jQuery.ColorPicker.js</td>
                <td>1.0</td>
                <td>颜色控件。</td>
              </tr>
              <tr>
                <td>Bootstrap.modal.js</td>
                <td>3.3.0</td>
                <td>Bootstrap模态窗口，弹窗插件。</td>
              </tr>
              <tr>
                <td>Bootstrap.dropdown.js</td>
                <td>3.3.0</td>
                <td>Bootstrap下拉框插件。</td>
              </tr>
              <tr>
                <td>Bootstrap.transition.js</td>
                <td>3.3.0</td>
                <td>Bootstrap过渡效果(Transition)插件。</td>
              </tr>
              <tr>
                <td>Bootstrap.tooltip.js</td>
                <td>3.3.0</td>
                <td>Bootstrap工具提示插件。</td>
              </tr>
              <tr>
                <td>Bootstrap.popover.js</td>
                <td>3.3.0</td>
                <td>Bootstrap弹出框插件。</td>
              </tr>
              <tr>
                <td>Bootstrap.alert.js</td>
                <td>3.3.0</td>
                <td>Bootstrap警告框插件。</td>
              </tr>
              <tr>
                <td>Bootstrap.slider.js</td>
                <td>1.0.1</td>
                <td>Bootstrap滑动条插件。</td>
              </tr>
              <tr>
                <td>Bootstrap.datetimepicker.js</td>
                <td>1.0</td>
                <td>Bootstrap日期插件。</td>
              </tr>
              <tr>
                <td>Bootstrap.Switch.js</td>
                <td>1.3</td>
                <td>Bootstrap 开关控件。</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

      <div class="hui-panel hui-panel-default mt-20">
        <div class="hui-panel-header clearfix">
          <span class="f-l">lib中的第三方插件</span>
          <span class="f-r">非必选插件，请有选择性的使用，用不上的可自行删除，减少框架体积</span>
        </div>
        <div class="hui-panel-body">
          <table class="hui-table hui-table-border hui-table-bordered hui-table-bg">
            <thead>
              <tr>
                <th width="30%">名称</th>
                <th width="20%">版本号</th>
                <th>描述</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>jQuery.js</td>
                <td>1.9.1</td>
                <td>jQuery库，可自行下载新版本，替换现有版本。</td>
              </tr>
              <tr>
                <td>jquery.SuperSlide</td>
                <td>2.1.3</td>
                <td>幻灯片组件</td>
              </tr>
              <tr>
                <td>jquery.validation</td>
                <td>1.14.0</td>
                <td>表单验证插件</td>
              </tr>
              <tr>
                <td>datatables</td>
                <td>1.10.0</td>
                <td>表格插件</td>
              </tr>
              <tr>
                <td>nprogress</td>
                <td>0.2.0</td>
                <td>进度条插件</td>
              </tr>
              <tr>
                <td>layer</td>
                <td>3.1.1</td>
                <td>layer弹出层插件</td>
              </tr>
              <tr>
                <td>laypage</td>
                <td>1.3</td>
                <td>laypage 翻页插件</td>
              </tr>
              <tr>
                <td>html5shiv.js</td>
                <td>3.7.0</td>
                <td>html5插件，让低版本IE支持html5元素</td>
              </tr>
              <tr>
                <td>DD_belatedPNG_0.0.8a-min.js</td>
                <td>0.0.8a</td>
                <td>解决IE6png透明</td>
              </tr>
              <tr>
                <td>swfobject.js</td>
                <td>2.2</td>
                <td>Flash插件</td>
              </tr>
              <tr>
                <td>waterfall.min</td>
                <td>0.1.6</td>
                <td>瀑布流插件</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>

    <footer class="hui-footer mt-20">
      <div class="hui-layout-content">
        <nav class="hui-footer-nav">
          <a target="_blank" href="http://www.h-ui.net/aboutHui.shtml">关于H-ui</a>
          <span class="hui-pipe">|</span>
          <a target="_blank" href="http://www.h-ui.net/copyright.shtml">软件著作权</a>
          <span class="hui-pipe">|</span>
          <a target="_blank" href="http://www.h-ui.net/juanzeng.shtml">感谢捐赠</a>
        </nav>
        <p>Copyright &copy;2013-2022 H-ui.net All Rights Reserved. <br>
          <a rel="nofollow" target="_blank" href="http://www.miitbeian.gov.cn/">豫ICP备19019279号-1</a>
          <br>
          未经允许，禁止转载、抄袭、镜像<br>
          用心做站，做不一样的站</p>
      </div>
    </footer>
  </div>
</div>
<!--普通弹出层-->
<div id="hui-modal-demo" class="hui-modal fade middle" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="hui-modal-dialog">
    <div class="hui-modal-content radius">
      <div class="hui-modal-header">
        <h3 class="hui-modal-title">对话框标题</h3>
        <a class="hui-modal-close" data-dismiss="modal" aria-hidden="true" href="javascript:void();">×</a>
      </div>
      <div class="hui-modal-body">
        <p>对话框内容…</p>
      </div>
      <div class="hui-modal-footer">
        <button class="hui-btn hui-btn-primary">确定</button>
        <button class="hui-btn" data-dismiss="modal" aria-hidden="true">关闭</button>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="lib/jquery-ui/1.9.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="h-ui/js/H-ui.min.js"></script>
<script type="text/javascript" src="lib/jquery.SuperSlide/2.1.3/jquery.SuperSlide.min.js"></script>
<script type="text/javascript" src="lib/jquery.validation/1.14.0/jquery.validate.js"></script>
<script type="text/javascript" src="lib/jquery.validation/1.14.0/validate-methods.js"></script>
<script type="text/javascript" src="lib/jquery.validation/1.14.0/messages_zh.js"></script>
<script>
//弹窗
function modaldemo(){
  $("#hui-modal-demo").modal("show");
}
//消息框
function modalalertdemo(){
  $("body").Huimodalalert({
      content: '我是消息框，2秒后我自动滚蛋！',
      speed: 2000,
    }, function () {
    alert("我已滚蛋");
  });
}
$(function(){
  $(".hui-input-text,.hui-textarea").Huifocusblur();

  //幻灯片
  jQuery("#hui-carousel-demo .hui-carousel").slide({
    mainCell: ".bd ul",
    titCell: ".hd li",
    trigger: "click",
    effect: "leftLoop",
    autoPlay: true,
    delayTime: 700,
    interTime: 3000,
    pnLoop: false,
    titOnClassName: "active"
  });

  $(".hui-panel").Huifold({
    titCell:'.hui-panel-header',
    mainCell:'.hui-panel-body',
    type:1,
    trigger:'click',
    className:"selected",
    speed:"first",
  });

  //邮箱提示
  $("#email").emailsuggest();

  //checkbox 美化
  $('.skin-minimal input').iCheck({
    checkboxClass: 'icheckbox-blue',
    radioClass: 'iradio-blue',
    increaseArea: '20%'
  });
  $('.skin-minimal input[name=checkbox2]').on('ifChecked', function(event) {
    console.log(event.type)
    $('.skin-minimal input[name=checkbox2]').each(function(e) {
      if($(this).is(":checked")) {
        console.log($(this).val());
      }
    })
  })
  

  //日期插件
  $("#datetimepicker").datetimepicker({
    language: 'zh-cn',
    format: 'yyyy-mm-dd',
    minView: "month",
    todayBtn:  1,
    autoclose: 1,
    endDate : new Date()
  }).on('hide',function(e) {
    //此处可以触发日期校验。
  });

  /*+1 -1效果*/
  $("#spinner-demo").Huispinner({
    value:1,
    minValue:1,
    maxValue:99,
    dis:1
  });

  $(".hui-textarea").Huitextarealength({
    minlength:10,
    maxlength:200.
  });

  $("#demoform").validate({
    rules:{
      email:{
        required:true,
        email:true,
      },
      username:{
        required:true,
        minlength:4,
        maxlength:16
      },
      telephone:{
        required:true,
        isMobile:true,
      },
      password:{
        required:true,
        isPwd:true,
      },
      password2:{
        required:true,
        equalTo: "#password"
      },
      sex:{
        required:true,
      },
      datetimepicker:{
        required:true,
      },
      checkbox2:{
        required:true,
      },
      city:{
        required:true,
      },
      website:{
        required:true,
        url:true,
      },
      beizhu:{
        maxlength:500,
      }
    },
    onkeyup:false,
    focusCleanup:true,
    success:"valid",
    submitHandler: function(form){
      $("#modal-shenqing-success").modal("show");
      $(form).ajaxSubmit();
    }
  });

  //选项卡
  $("#hui-tab-demo1").Huitab({
    index:0
  });

  $("#hui-tag-demo1").Huitag();

  //返回顶部
  $.Huitotop();

  //hover效果
  $('.hui-mask').Huihover();

  //星级评价
  $("#star-1").raty({
    hints: ['1','2', '3', '4', '5'],//自定义分数
    starOff: 'iconpic-star-S-default.png',//默认灰色星星
    starOn: 'iconpic-star-S.png',//黄色星星
    path: 'h-ui/images/star',//可以是相对路径
    number: 5,//星星数量，要和hints数组对应
    showHalf: true,
    targetKeep : true,
    click: function (score, evt) {//点击事件
      //第一种方式：直接取值
      $("#result-1").html('你的评分是'+score+'分');
    }
  });

  var _bodyHeight = $(window).height();
  var _doch = $(document).height();
  $(".hui-container-wrapper").height(_bodyHeight);

  /*左右滑动菜单*/
  $(".JS-nav-toggle").click(function() {
    $("body").addClass('hui-side-box-open');
    $(".hui-container-bg").height(_bodyHeight).show();
  });
  $(".hui-container-bg").click(function() {
    $(this).hide();
    $("body").removeClass('hui-side-box-open');
  });

  $('#exampleTable').HuicheckAll({}, function(checkedInfo) {
    console.log('Number of checked items:', checkedInfo.Number);
    console.log('Values of checked items:', checkedInfo.checkedArr);
  });
});
</script>
</body>
</html>
<!--H-ui前端框架提供前端技术支持 h-ui.net @2024-09-13 -->
